from nicegui import ui
import pandas as pd
import plotly.graph_objects as go

class MyApp:
    def __init__(self):
        self.df = pd.DataFrame(columns=['x', 'y', 'z'])  # 将DataFrame作为实例变量
        self.table_container = ui.row()  # 先创建一个容器来放置表格
        self.setup_ui()

    def setup_ui(self):
        ui.label('登录系统')
        self.x = ui.input(label='x:')  # 将输入框作为实例变量
        self.y = ui.input(label='y:')
        self.z = ui.input(label='z:')

        fig = go.Figure()
        fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
        self.plot = ui.plotly(fig).classes('w-full h-40')  # 将plot作为实例变量

        ui.button('Add trace', on_click=self.add_trace)
        self.refresh_table()  # 调用refresh_table来初始化表格
        ui.button('Add to DataFrame', on_click=self.add_to_dataframe)

    def add_trace(self, event=None):  # 添加event参数以兼容NiceGUI的回调机制
        fig = self.plot.figure
        fig.add_trace(go.Scatter(x=[1, 2], y=[self.x.value, self.y.value], mode="markers"))
        self.plot.update()

    def add_to_dataframe(self, event=None):  # 添加event参数以兼容NiceGUI的回调机制
        new_row_df = pd.DataFrame({'x': [self.x.value], 'y': [self.y.value], 'z': [self.z.value]})
        self.df = pd.concat([self.df, new_row_df], ignore_index=True)
        self.refresh_table()  # 更新表格显示

    def refresh_table(self):
        self.table_container.clear()  # 清除容器中的现有内容
        # 直接在容器内创建新的表格视图
        self.table = ui.table.from_pandas(self.df).classes('max-h-40')
        # self.table_container.add(self.table)  # 使用add方法将表格添加到容器中


# 实例化MyApp类，启动UI
app = MyApp()
ui.run()
